<template>
    <a-modal :title="title" :width="1200" :destroyOnClose="true" :maskClosable="false"
             :visible="visible" @cancel="handleCancel"
             :bodyStyle="{backgroundColor:'#F8F8F8' ,padding:'8px 16px'}">
        <a-row :gutter="[16,16]" type="flex" style="min-height: 500px">
            <a-col :span="8" flex="auto">
                <List class="flexCol padded10"
                      :dataIndex="dataIndex"
                      :isUpdate="isUpdate"
                      :dataList="newsList"
                      @indexUp="indexUp"
                      @indexDown="indexDown"
                      @onAddItem="onAddItem"
                      @onRemove="onRemove"
                      @onChange="(key)=>{ this.dataIndex=key;}"
                />
            </a-col>
            <a-col :span="16" flex="auto">
                <div class="flexCol padded10">
                    <Form v-if="dataIndex>=0" :dataIndex="dataIndex" :dataList="newsList"/>
                </div>
            </a-col>
        </a-row>

        <!-- Modal 页脚 -->
        <template slot="footer">
            <a-row :gutter="16">
                <a-col :span="20" class=" text-right text-aux ">修改图文素材时 保存功能只对当前修改的图文有效</a-col>
                <a-col :span="4" class="text-center">
                    <a-button @click="handleCancel">关闭</a-button>
                    <a-button type="danger" :loading="loading" @click="onsubmit">保存连接</a-button>

                </a-col>
            </a-row>
        </template>
    </a-modal>
</template>
<script>

    import Schema from 'async-validator';
    import {formRule} from './validator'


    export default {
        props:['articles'],

        components: {
            List: () => import('./List'),
            Form: () => import('./Form')
        },
        data() {
            return {
                visible: true, //modal 显示状态
                loading: false, //按钮Loading
                isUpdate: false,
                title: "自定义图文链接",
                newsList: [],
                dataIndex: -1,
                errmsg: "",
                rules: formRule(),
            };
        },
        methods: {
            //关闭弹窗
            handleCancel() {
                this.visible = false;
                this.$emit('closeModal', {
                    render: false
                });
            },

            //提交表单数据
            onsubmit(){
                this.errmsg = "";
                if (this.newsList.length === 0) {
                    this.errmsg += "请至少设置一个图文链接地址<br>";
                } else {
                    for (let i = 0; i < this.newsList.length; i++) {
                        this.validator(i, this.newsList[i]);
                    }
                }
                if (this.errmsg.length > 0) {
                    this.$notification.error({message: '链接设置失败', description:this.errmsg })
                    return false;
                }

                let mediaObj={
                    mode:"link",
                    mediaName:'自定义链接',
                    articles:this.newsList
                }
                this.visible = false;
                this.$emit('closeModal', {render: true, data: mediaObj});
            },

            //添加对象
            onAddItem() {
                const size = this.newsList.length + 1;
                if (size > 8) {
                    alert("同一个图文素材最多不超过8条图文");
                    return false
                }
                let item = {
                    title: "请设置连接标题",
                    description: "",
                    picUrl: "", //封面素材地址
                    url: "",
                }
                this.newsList.push(item);
                this.dataIndex = this.newsList.length - 1;
            },
            onRemove(key) {
                this.newsList = this.newsList.filter(function (item, index, arr) {
                    return index !== key;
                });
                const length = this.newsList.length;
                if (length > 0) {
                    this.dataIndex = 0
                } else {
                    this.dataIndex = -1
                }
            },
            //上移
            indexUp(index) {
                if (index !== 0) {
                    this.newsList[index] = this.newsList.splice(index - 1, 1, this.newsList[index])[0];
                } else {
                    this.newsList.push(this.newsList.shift());
                }
            },
            //下移
            indexDown(index) {
                if (index !== this.newsList.length - 1) {
                    this.newsList[index] = this.newsList.splice(index + 1, 1, this.newsList[index])[0];
                } else {
                    this.newsList.unshift(this.newsList.splice(index, 1)[0]);
                }
            },
            //验证表单数据是否合法
            validator(index, obj) {
                const _this = this;
                //表单数据验证规则
                const validator = new Schema(this.rules);
                validator.validate(obj, (errors) => {
                    if (errors) {
                        for (let i = 0; i < errors.length; i++) {
                            _this.errmsg += "  第" + (index + 1) + "链接:" + errors[i].message;
                        }
                    }
                });
                return true
            },

        },
        created() {
            if(this.articles){
                this.newsList=this.articles;
                this.dataIndex=0;

            }
        }

    };
</script>
